<template>
  <div>
    <div class="show-card">
      <div class="content">
        <div class="title">{{title}}</div>
        <div class="number">{{number}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['title','number']
}
</script>

<style scoped>
  .show-card{
    border-radius: 10px;
    border: 2px solid rgba(180,200,200,0.2);
    box-shadow: 0px 0px 6px 3px rgba(200,200,200,0.3);
    width: 200px;
    flex: 1;
    height: 17vh;
    background-color: white;
    position: relative;
    overflow: hidden;
    margin:.5rem;
  }
  .show-card::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    background: linear-gradient(to bottom, rgb(82, 159, 253), rgb(84, 86, 253));
  }
  .content{
    position: absolute;
    top: 30px;
    width: 100%;
  
    padding-top: 1rem;
  }

  .content .title{
    font-weight: bold;
    margin-bottom: 1rem;
  }
</style>